<template>
    <div style=" margin-left: 20px">
      <p>盘前预案</p>
      <p>
        情绪：跌停板只有15家，并且明天指数回暖，那么跌停数将进一步减少；明天情绪必然是回暖的一天；
        所以明天是可以干的一天了
      </p>

      <p>
        高位：首先现在基本也没有什么逻辑可言，就是吃情绪溢价，就是重视图形走势，如果集合竞价出现弱转强，就可以干；
      </p>
      <p>
        选择其中一个 1手：
        魅视科技、实丰文化：估价太高，别去
        华胜天成，容量品种顶一字，不要去接受分歧；明天肯定是分歧的一天，如果尾盘烂板就不好了
        南京化纤：一字预期
        日出东方：一字预期
        东方智造：一字预期
        广博股份：高开预期
        二六三：低开就卖，弱转强高开就买
        生意宝：弱转强可去
      </p>

      <p>
        盘中：盘中已经无数次上当了，没有1次成功，盘中中途千万别去追；而盘中上板的，
        1、容量品种别去，容易炸板
        2、10:00之后就别去了，10:00之前不能封板的，都是弱的，没有必要去；
        3、盘中往上冲，千万别在半路去追，没有一次成功，要么打板，要么开盘就干，千万别6,7个点去追，没有1次成功的 
      </p>

      <p>
        昨日：
        国光电器：卖；</br>
        和而泰：卖；
        二六三：低开就卖，高开先看看；  
      </p>
      <div style="display: flex;">
        
        <p>情绪周期</p> 
        <el-text style=" margin-left: 20px;color:#333333">情绪负反馈积分：</el-text>
        <el-text style=" margin-left: 8px;color:#67C23A;font-size: large;font-weight: bolder">{{score.toFixed(2)}}</el-text>
        <el-text style=" margin-left: 20px;color:#333333">情绪周期分析：</el-text>
        <el-text style=" margin-left: 8px;color:#67C23A;font-size: large;font-weight: bolder">{{"混沌期"}}</el-text> 
      </div>
      
      <el-table
        v-loading="loading"
        ref="tableRef"
        row-key="code"
        :data="tableDataScore"
        style="width: 100%;" class="customem"
      >
      <el-table-column style="color: #990000;" prop="shortName" label="分类" :width="labWidth" >
            <template #default="scope">
                <el-text style="color: #333333;font-weight: bold;font-size: 13px;">{{scope.row.shortName}}</el-text>
            </template>
        </el-table-column>

        <el-table-column prop="name" label="名称" :width="labWidth" >
            <template #default="scope">
                <el-text >{{scope.row.name}}</el-text>
            </template>
        </el-table-column>

        <el-table-column prop="importantScore" label="分数" :width="labWidth" />

         

        <el-table-column prop="increase" label="昨天收盘" :width="labWidth" >
            <template #default="scope">
                <el-text >{{getNegativeScore_Yes_str(scope.row)}}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="increase" label="竞价" :width="labWidth" >
            <template #default="scope">
                <el-text >{{getNegativeScore_str(scope.row)}}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="increase" label="盘中" :width="labWidth" >
          <template #default="scope">
                <el-text >{{''}}</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="increase" label="情绪负反馈" :width="labWidth" >
          <el-text >{{''}}</el-text>
        </el-table-column> 

        <el-table-column prop="yesIncrease" label="昨天收盘" :width="labWidth" >
            <template #default="scope">
                <el-text :style="{ backgroundColor: getIncreaseBgColor(scope.row),color:getIncreaseTextColor(scope.row),fontWeight:getIncreaseFontWeight_Yes(scope.row)}">{{scope.row.yesIncrease + "%"}}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="increase" label="竞价" :width="labWidth" >
            <template #default="scope">
                <el-text >{{scope.row.increase}}%</el-text>
            </template>
        </el-table-column> 

        <el-table-column prop="increase" label="盘中" :width="labWidth" >
            <template #default="scope">
                <el-text >{{scope.row.increase}}%</el-text>
            </template>
        </el-table-column> 


        <el-table-column prop="increase" label="备注" width="auto" >
          <el-text >{{''}}</el-text>
        </el-table-column>
      </el-table>  

    </div>
  </template>
    
  <script lang="ts" setup>
  import { onMounted, ref } from "vue";
  import type { TableColumnCtx, TableInstance } from "element-plus";
  import { reactive } from "vue";
  import axios from "axios";
  import { countdownEmits, ElMessage, ElMessageBox, ElNotification } from "element-plus";
  import ClipboardJS from 'clipboard';
  import { useStore } from 'vuex';
  import type { Action } from 'element-plus'
  

  // ElNotification({
  //   title: '情绪周期',
  //   message: "<p style='color:#008888'>指数</p>",
  //   duration: 0,
  //   dangerouslyUseHTMLString: true,
  //   showClose:false,
  // })

  const labWidth = ref(100);
  const data = reactive({
    code: "",
  });
  
  const score = ref(1);

  const onLoadScore = () => {
    console.log("submit!");
    const api = "api/plat/stockNowPrice/findMonitorAll";
    console.log(api) 
    axios
      .get(api)
      .then((response) => {
        tableDataScore.value = response.data.data;
        var list = response.data.data;
        score.value = 0;
        for (var i = 0; i < list.length; i++) {
          score.value = score.value + getNegativeScore_Yes(list[i]) + getNegativeScore(list[i]);
          console.log("分数：" + score.value);
        }
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  };
  
  interface StockNowPrice {
    id: number;
    name: string;
    code: string;
    focus: number;
    status: number;
    yesIncrease: number;
    bidIncrease: number;
    increase: number;
    importantScore: number;
    shortName: string;
    shortNameType: number;
  }


  const loading = ref(false);
  const tableRef = ref<TableInstance>();
  
  const tableDataScore = ref([]);

  const store = useStore();
  
  
  var code = ''
  onMounted(() => {
        onLoadScore();
   
        const clipboard = new ClipboardJS('.btn-copy', {
          text: () => code
        });
  
        clipboard.on('success', (e) => {
          console.log('Text copied to clipboard');
          e.clearSelection();
        });
  
        clipboard.on('error', (e) => {
          console.error('Failed to copy text: ', e);
        });
   });
  
   const getNegativeScore_str = (row: StockNowPrice) => {
      var xs = getNegativeScore(row);
      if (xs > 0) {
        return '' + xs;
      }
      return ''; 
    }

    const getNegativeScore = (row: StockNowPrice) => {
      var xs = 0.00;  
      if (row.increase <= -3 && row.increase > -5) {
        xs = 1;
      }
      if (row.increase <= -5 && row.increase > -8) {
        xs = 3;
      }
      if (row.increase <= -8 && row.increase > -10.5) {
        xs = 5;
      }
      xs = xs * row.importantScore / 5.00;
      return xs; 
    }

    const getNegativeScore_Yes_str = (row: StockNowPrice) => {
      var xs = getNegativeScore_Yes(row);
      if (xs > 0) {
        return '' + xs;
      }
      return ''; 
    }
    const getNegativeScore_Yes = (row: StockNowPrice) => {
      var xs = 0.00;  
      if (row.yesIncrease <= -3 && row.yesIncrease > -5) {
        xs = 1;
      }
      if (row.yesIncrease <= -5 && row.yesIncrease > -8) {
        xs = 3;
      }
      if (row.yesIncrease <= -8 && row.yesIncrease > -10.5) {
        xs = 5;
      }
      xs = 0.6 * xs * row.importantScore / 5.00;// 昨天的乘以60%
      return xs; 
    }

    const getIncreaseBgColor = (row: StockNowPrice) => {
      if (row.yesIncrease <= -9.90) {
        return 'green'; 
      } else {
        return 'white';
      }
    }

    const getIncreaseTextColor = (row: StockNowPrice) => {
      if (row.yesIncrease <= -9.90) {
        return 'white'; 
      } else {
        if (row.yesIncrease <= -8.0 && row.yesIncrease > -9.90) {
          return '#67C23A'; 
        } else {
          return '#666666';
        }
      }
    }

    const getIncreaseFontWeight_Yes = (row: StockNowPrice) => {
      if (row.yesIncrease <= -8.0) {
        return 'bold'; 
      } else {
        return 'normal';
      }
    }
    const options_type = [
                { value: '1',label: '杂毛', },
                { value: '2',label: '市场情绪龙', },
                { value: '3',label: '市场趋势龙' },

                { value: '4',label: '板块情绪龙' },
                { value: '5',label: '板块趋势龙' },
                { value: '6',label: '板块领涨龙' },

                { value: '7',label: '市场老龙' },
                { value: '8',label: '板块老龙' },
                { value: '9',label: '权重老龙' },
                
                { value: '10',label: '预期龙' },
                { value: '11',label: '避险龙' },
            ]
    const getShortNameType = (row: StockNowPrice) => {
      return options_type[row.shortNameType].label; 
    }
  </script>
    
    <style >
    .customem {
      border: 0.5px solid #dfe6ec;
    }
    
    .customem th, .customem td {
      border: 0.5px solid #dfe6ec;
    }

    .el-table .el-table__header th {
      color: #999;       /* 字体颜色 */
      font-weight:100; /* 字体粗细 */
      font-size: 13px;   /* 字体大小 */
      /* background-color: #f5f7fa; 背景颜色（可选） */
    }
   
    </style>